<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="number" label="试题编号" width="120" />
      <el-table-column prop="subject" label="学科" width="120" />
      <el-table-column prop="catalog" label="目录" width="150" />
      <el-table-column
        :formatter="formatter"
        prop="questionType"
        label="题型"
        width="120"
      >
        <!-- <template #default="{row}">
          <span>{{row.questionType}}</span>
        </template> -->
      </el-table-column>
      <el-table-column label="题干" width="300">
        <template #default="{ row }">
          <span v-html="row.question" />
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="220">
        <template #default="{ row }">
          <span>{{ row.addDate | timeFilter("YYYY-MM-DD HH:mm:ss") }}</span>
        </template>
      </el-table-column>
      <el-table-column
        :formatter="formatter"
        prop="difficulty"
        label="难度"
        width="100"
      />
      <el-table-column prop="creator" label="录入人" width="120" />
      <el-table-column
        :formatter="formatter"
        prop="chkState"
        label="审核状态"
        width="120"
      />
      <el-table-column prop="chkRemarks" label="审核意见" width="120" />
      <el-table-column prop="chkUser" label="审核人" width="120" />
      <el-table-column
        :formatter="formatter"
        prop="publishState"
        label="发布状态"
        width="120"
      />

      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row }">
          <el-button
            type="text" size="small" @click="handlePreview(row.id)"
          >预览</el-button>
          <el-button
            type="text"
            size="small"
            @click="handleClickAudit(row.id)"
            :disabled="auditDisabled(row)"
          >审核</el-button>
          <el-button
            type="text"
            size="small"
            @click="$router.push(`/questions/new?id=${row.id}`)"
            :disabled="!showShelves(row.publishState)"
          >修改</el-button>
          <el-button
            v-if="showShelves(row.publishState)"
            type="text"
            ref="shelves"
            size="small"
            @click="upOrDownShelves(row.id, row.publishState)"
          >上架</el-button>
          <el-button
            v-else
            type="text"
            ref="shelves"
            size="small"
            @click="upOrDownShelves(row.id, row.publishState)"
          >下架</el-button>
          <el-button
            :disabled="!showShelves(row.publishState)"
            type="text"
            size="small"
            @click="handleClickDelete(row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 预览 -->
    <Preview
      :showPreview.sync="showPreview"
      :subjectId="subjectId"
      :total="total"
    />

    <!-- 审核 -->
    <el-dialog
      title="题目审核"
      :visible="auditDialog"
      width="30%"
      @close="handleCloseAuditDialog"
    >
      <el-form :model="auditForm" :rules="rules" ref="auditForm">
        <el-radio v-model="auditForm.chkState" :label="1">通过</el-radio>
        <el-radio v-model="auditForm.chkState" :label="2">拒绝</el-radio>

        <el-form-item class="auditRemarks" prop="chkRemarks">
          <el-input
            v-model="auditForm.chkRemarks"
            placeholder="请输入审核意见"
          />
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="handleCloseAuditDialog">取 消</el-button>
        <el-button type="primary" @click="handleAudit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { choiceCheck, choicePublish, remove } from '@/api/hmmm/questions'
import Preview from './Preview.vue' // 导入预览组件
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'questions-choice-table',
  components: {
    Preview
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      showPreview: false,
      subjectId: 0,
      auditDialog: false, // 审核弹窗
      auditForm: {
        chkState: 1, // 审核状态 是否通过
        chkRemarks: '' // 审核意见
      },
      rules: {
        chkRemarks: [
          { required: true, message: '请输入审核意见', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    formatter (row, column, cellValue) {
      // console.log(column)
      if (column.label === '题型') {
        if (!column) {
          return '题型出错'
        }
        const res = questionType.find(item => {
          if (item.value === +cellValue) {
            return item.label
          }
        })
        return res.label
      } else if (column.label === '难度') {
        if (!column) {
          return '难度出错'
        }
        const res2 = difficulty.find(item => {
          if (item.value === +cellValue) {
            return item.label
          }
        })
        return res2.label
      } else if (column.label === '审核状态') {
        if (+cellValue === 0) {
          return '待审核'
        } else if (+cellValue === 1) {
          return '通过'
        } else if (+cellValue === 2) {
          return '拒绝'
        } else {
          return ''
        }
      } else if (column.label === '发布状态') {
        if (+cellValue === 0) {
          return '未发布'
        } else if (+cellValue === 1) {
          return '已发布'
        } else {
          return ''
        }
      } else {
        return 'gun'
      }
    },
    // 预览
    handlePreview (id) {
      // console.log(id)
      this.showPreview = true
      this.subjectId = id
    },
    // 审核按钮是否禁用
    auditDisabled (row) {
      return row.chkState !== 0
    },
    // 审核弹窗关闭
    handleCloseAuditDialog () {
      this.auditDialog = false
      this.$refs.auditForm.resetFields()
      this.auditForm = {
        chkState: 1, // 审核状态 是否通过
        chkRemarks: '' // 审核意见
      }
    },
    // 点击审核
    handleClickAudit (id) {
      this.auditDialog = true
      this.subjectId = id
    },
    // 点击确定 ====>> 审核
    handleAudit () {
      this.$refs.auditForm.validate(async (valid) => {
        if (!valid) {
          return this.$message.warning('请输入审核意见')
        }

        const res = await choiceCheck({
          ...this.auditForm,
          id: this.subjectId
        })
        this.$message.success('审核成功')
        this.handleCloseAuditDialog()
        this.$emit('getTableData')
        console.log(res)
      })
      // console.log(this.auditForm)
    },
    // 展示上架还是下架按钮
    showShelves (state) {
      return state === 0
    },
    // 上下架
    upOrDownShelves (id, publishState) {
      // 1 上架  0 下架
      const str = publishState === 0 ? '上架' : '下架'
      publishState === 0 ? publishState = 1 : publishState = 0
      this.$confirm(`确定${str}该题目吗？`, '温馨提示', { type: 'warning' }).then(async () => {
        // console.log(str)
        await choicePublish({
          id,
          publishState
        })
        // console.log(res)
        if (publishState === 1) {
          this.$message.success('上架成功')
        } else {
          this.$message.success('下架成功')
        }
        this.$emit('getTableData')
      })
    },
    handleClickDelete (id) {
      this.$confirm('你确定要删除吗？', '温馨提示', { type: 'warning' }).then(async () => {
        await remove({ id: id })
        this.$message.success('删除成功')
        this.$emit('delSubject')
      })
    }
  }
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
::v-deep {
  .el-input--medium {
    margin-top: 20px;
  }
  .el-radio {
    width: 40%;
  }
}
</style>
